<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="wrap">
        <button class="btn">新增</button>
        <div class="list">
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
            <!-- <li>07</li> -->
        </div>
    </div>
</body>
<script>
    // document.createElement("标签名")  => 创建元素节点,返回被创建的元素节点  
    // 元素节点 创建完之后 默认存储在浏览器内存当中 => 只有放到页面才能看见

    // document.createTextNode("我是新增的li") => 创建文本节点,返回被创建的文本节点  
    // 文本节点 创建完之后 默认存储在浏览器内存当中 => 只有放到页面才能看见


    // 节点的放置:
    // parent.appendChild(node) 由父节点统筹,向匹配的节点(父节点)中追加另一个节点(新增的节点)   
    // parent.append(string|node) 由父节点统筹,向匹配的节点(父节点)中追加另一个节点(新增的节点)或字符串

    // parent.prepend(string|node) 由父节点统筹,向匹配的节点(父节点)中预追加另一个节点(新增的节点)或字符串

    // 追加 => 父元素所有节点的最后方
    // 预追加 => 父元素所有节点的最前方

    // 插入同级  (放到同级元素的前)
    // parent.insertBefore(newNode,oldNode)  由父节点统筹,将一个节点(新增的) 放到 另一个(已存在的)节点的前面    => 喜新厌旧

    // 没有insertAfter()

    var list = document.getElementsByClassName("list")[0];
    var mid = document.getElementsByClassName("mid")[0];
    var btn = document.getElementsByClassName("btn")[0];


    // 点击新增按钮 创建li => 放到list中
    btn.onclick = function () {
        // 创建元素节点
        var li = document.createElement("li"); // <li></li>
        // 添加属性
        li.setAttribute("class", "newLi");
        li.setAttribute("title", "hello");

        // 添加文本
        // li.innerText = "我是新增的li";

        // 把 li  放到mid的前面
        // list.insertBefore(li,mid);
        
        // 把 li  放到mid的后面 (mid的后一个元素的前面)
        list.insertBefore(li,mid.nextElementSibling);

        // 创建文本节点
        var text = document.createTextNode("我是新增的li");
        console.log(text, typeof text);
        li.appendChild(text);   //把文本节点放到 li中

        list.appendChild(li);   // 把 li放到 list中

    }
</script>

</html>